import Taro, { Component, Config } from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { AtIcon, AtModal, AtButton, AtTextarea } from "taro-ui";

import "./index.scss";
import bg from "../../assets/img/bg.png";

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = { text: "", value: "", tip: false };
  }

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  config: Config = {
    navigationBarTitleText: "英文倒转",
  };

  copy(s: string) {
    Taro.setClipboardData({
      data: s,
    }).then(() => {
      Taro.showToast({
        title: "复制成功",
      });
    });
  }

  flip(s: string) {
    let flipTable = {
      "\u0021": "\u00A1",
      "\u0022": "\u201E",
      "\u0026": "\u214B",
      "\u0027": "\u002C",
      "\u0028": "\u0029",
      "\u002E": "\u02D9",
      "\u0033": "\u0190",
      "\u0034": "\u152D",
      "\u0036": "\u0039",
      "\u0037": "\u2C62",
      "\u003B": "\u061B",
      "\u003C": "\u003E",
      "\u003F": "\u00BF",
      A: "\u2200",
      B: "\u15FA",
      C: "\u2183",
      D: "\u15E1",
      E: "\u018E",
      F: "\u2132",
      G: "\u2141",
      J: "\u017F",
      K: "\u22CA",
      L: "\u2142",
      M: "\u0057",
      N: "\u1D0E",
      P: "\u0500",
      Q: "\u038C",
      R: "\u1D1A",
      T: "\u22A5",
      U: "\u2229",
      V: "\u1D27",
      Y: "\u2144",
      "\u005B": "\u005D",
      _: "\u203E",
      a: "\u0250",
      b: "\u0071",
      c: "\u0254",
      d: "\u0070",
      e: "\u01DD",
      f: "\u025F",
      g: "\u0183",
      h: "\u0265",
      i: "\u0131",
      j: "\u027E",
      k: "\u029E",
      l: "\u2758",
      m: "\u026F",
      n: "\u0075",
      r: "\u0279",
      t: "\u0287",
      v: "\u028C",
      w: "\u028D",
      y: "\u028E",
      "\u007B": "\u007D",
      "\u203F": "\u2040",
      "\u2045": "\u2046",
      "\u2234": "\u2235",
      é: "\u01DD",
    };

    for (let i in flipTable) {
      flipTable[flipTable[i]] = i;
    }
    let last = s.length - 1;
    //Thanks to Brook Monroe for the suggestion to use Array.join
    let result = new Array(s.length);
    for (let i = last; i >= 0; --i) {
      let c = s.charAt(i);
      let r = flipTable[c];
      result[last - i] = r ? r : c;
    }
    return result.join("");
  }

  render() {
    return (
      <View className="index">
        <AtModal
          isOpened={this.state.tip}
          title="关于"
          confirmText="晓得了"
          onConfirm={() => {
            this.setState({
              tip: false,
            });
          }}
          customStyle={{
            width: "100%",
            wordWrap: "break-word",
            wordBreak: "break-all",
          }}
          content="英文倒转是一个有趣的工具，我在 David Faden 的 http://www.revfad.com/flip.html 基础上将其移植到了小程序端，同时这也是我的第一个React项目。"
        />
        <View className="stack">
          <Image className="bg" src={bg}></Image>
        </View>
        <View className="stack container">
          <AtIcon
            value="help"
            size="30"
            color="#fff"
            onClick={() => {
              this.setState({
                tip: true,
              });
            }}
            customStyle={{
              margin: "5% 0",
              padding: "10",
            }}
          ></AtIcon>
          <AtTextarea
            maxLength={1000}
            onChange={(s) => {
              this.setState({
                value: s,
                text: this.flip(s),
              });
            }}
            value={this.state.value}
            placeholder="请输入要倒转的英文句子..."
          />
          <AtButton
            type="secondary"
            onClick={() => {
              this.copy(this.state.text);
            }}
            circle={true}
            customStyle={{
              margin: "5% 0",
              padding: "10",
            }}
          >
            复 制
          </AtButton>
          <Text
            style={{
              width: "100%",
              color: "white",
              wordWrap: "break-word",
              wordBreak: "break-all",
            }}
          >
            {this.state.text
              ? "倒转结果：" + this.state.text
              : "示例：I Love China. → ˙ɐuıɥↃ ǝʌo⅂ I"}
          </Text>
        </View>
        <Text
          style={{
            bottom: "5%",
            width: "100%",
            position: "fixed",
            textAlign: "center",
            color: "white",
          }}
        >
          *暂时只支持英文和部分标点符号的倒转
        </Text>
      </View>
    );
  }
}
